<template>
  <div class="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 py-3 w-full">
    <div class="w-full px-4 sm:px-6">
      <!-- 桌面端布局 -->
      <div class="hidden lg:flex lg:items-center lg:justify-between">
        <!-- 板块筛选 -->
        <div class="flex flex-wrap items-center space-x-1 sm:space-x-2">
          <button
            v-for="sector in sectors"
            :key="sector.value"
            @click="selectSector(sector.value)"
            :class="[
              'flex items-center space-x-1 px-3 py-1.5 rounded text-sm font-medium transition-colors',
              selectedSector === sector.value
                ? 'bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white'
                : 'bg-transparent text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'
            ]"
          >
            <Icon v-if="sector.icon" :name="sector.icon" class="w-4 h-4" />
            <span>{{ sector.label }}</span>
          </button>
        </div>
        
        <!-- 交易所筛选 -->
        <div class="flex flex-wrap items-center space-x-1 sm:space-x-2">
          <button
            v-for="exchange in exchanges"
            :key="exchange.value"
            @click="selectExchange(exchange.value)"
            :class="[
              'px-3 py-1.5 rounded text-sm font-medium transition-colors',
              selectedExchange === exchange.value
                ? 'bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white'
                : 'bg-transparent text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'
            ]"
          >
            {{ exchange.label }}
          </button>
        </div>
      </div>
      
      <!-- 移动端布局 -->
      <div class="lg:hidden space-y-3">
        <!-- 板块筛选下拉框 -->
        <div class="relative">
          <button
            @click="toggleSectorDropdown"
            class="w-full flex items-center justify-between px-3 py-2 bg-gray-100 dark:bg-gray-700 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300"
          >
            <div class="flex items-center space-x-2">
              <Icon v-if="getSelectedSectorIcon()" :name="getSelectedSectorIcon()" class="w-4 h-4" />
              <span>{{ getSelectedSectorLabel() }}</span>
            </div>
            <Icon name="chevron-down" class="w-4 h-4" />
          </button>
          
          <!-- 板块下拉菜单 -->
          <div 
            v-if="isSectorDropdownOpen"
            class="absolute top-full left-0 right-0 mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-10"
          >
            <button
              v-for="sector in sectors"
              :key="sector.value"
              @click="selectSector(sector.value)"
              :class="[
                'w-full flex items-center space-x-2 px-3 py-2 text-sm text-left hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors',
                selectedSector === sector.value
                  ? 'bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white'
                  : 'text-gray-600 dark:text-gray-400'
              ]"
            >
              <Icon v-if="sector.icon" :name="sector.icon" class="w-4 h-4" />
              <span>{{ sector.label }}</span>
            </button>
          </div>
        </div>
        
        <!-- 交易所筛选下拉框 -->
        <div class="relative">
          <button
            @click="toggleExchangeDropdown"
            class="w-full flex items-center justify-between px-3 py-2 bg-gray-100 dark:bg-gray-700 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300"
          >
            <span>{{ getSelectedExchangeLabel() }}</span>
            <Icon name="chevron-down" class="w-4 h-4" />
          </button>
          
          <!-- 交易所下拉菜单 -->
          <div 
            v-if="isExchangeDropdownOpen"
            class="absolute top-full left-0 right-0 mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-10"
          >
            <button
              v-for="exchange in exchanges"
              :key="exchange.value"
              @click="selectExchange(exchange.value)"
              :class="[
                'w-full flex items-center space-x-2 px-3 py-2 text-sm text-left hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors',
                selectedExchange === exchange.value
                  ? 'bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white'
                  : 'text-gray-600 dark:text-gray-400'
              ]"
            >
              <span>{{ exchange.label }}</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { SectorType, ExchangeType } from '~/types/market'
import Icon from '~/components/ui/Icon.vue'

// Props
interface Props {
  selectedSector?: SectorType
  selectedExchange?: ExchangeType
}

const props = withDefaults(defineProps<Props>(), {
  selectedSector: 'all',
  selectedExchange: 'all'
})

// Emits
const emit = defineEmits<{
  'update:sector': [value: SectorType]
  'update:exchange': [value: ExchangeType]
}>()

// 响应式数据
const selectedSector = ref(props.selectedSector)
const selectedExchange = ref(props.selectedExchange)

// 移动端下拉框状态
const isSectorDropdownOpen = ref(false)
const isExchangeDropdownOpen = ref(false)

// 板块选项
const sectors = [
  { value: 'all', label: '全部', icon: null },
  { value: 'stock-index', label: '股指', icon: 'stock-index' },
  { value: 'metal', label: '金属', icon: 'noble-metal' },
  { value: 'chemical', label: '能化', icon: 'chemical' },
  { value: 'agricultural', label: '农副', icon: 'agricultural' },
  { value: 'oil', label: '油脂', icon: 'oil' },
  { value: 'ferrous', label: '黑色', icon: 'ferrous' }
]

// 交易所选项
const exchanges = [
  { value: 'all', label: '全部' },
  { value: 'cffex', label: '中金所' },
  { value: 'sse', label: '上交所' },
  { value: 'szse', label: '深交所' },
  { value: 'shfe', label: '上期所' },
  { value: 'dce', label: '大商所' },
  { value: 'zce', label: '郑商所' },
  { value: 'ine', label: '能源中心' },
  { value: 'gfex', label: '广期所' }
]

// 选择板块
const selectSector = (value: SectorType) => {
  // 如果选择的是"全部"，直接更新
  if (value === 'all') {
    selectedSector.value = value
    emit('update:sector', value)
  } else {
    // 如果选择的是具体板块，则同时重置交易所
    selectedSector.value = value
    selectedExchange.value = 'all'
    emit('update:sector', value)
    emit('update:exchange', 'all')
  }
  
  // 关闭下拉框
  isSectorDropdownOpen.value = false
}

// 选择交易所
const selectExchange = (value: ExchangeType) => {
  // 如果选择的是"全部"，直接更新
  if (value === 'all') {
    selectedExchange.value = value
    emit('update:exchange', value)
  } else {
    // 如果选择的是具体交易所，则同时重置板块
    selectedExchange.value = value
    selectedSector.value = 'all'
    emit('update:exchange', value)
    emit('update:sector', 'all')
  }
  
  // 关闭下拉框
  isExchangeDropdownOpen.value = false
}

// 移动端下拉框控制
const toggleSectorDropdown = () => {
  isSectorDropdownOpen.value = !isSectorDropdownOpen.value
  isExchangeDropdownOpen.value = false // 关闭另一个下拉框
}

const toggleExchangeDropdown = () => {
  isExchangeDropdownOpen.value = !isExchangeDropdownOpen.value
  isSectorDropdownOpen.value = false // 关闭另一个下拉框
}

// 获取选中项的标签和图标
const getSelectedSectorLabel = () => {
  const sector = sectors.find(s => s.value === selectedSector.value)
  return sector ? sector.label : '全部'
}

const getSelectedSectorIcon = () => {
  const sector = sectors.find(s => s.value === selectedSector.value)
  return sector ? sector.icon : null
}

const getSelectedExchangeLabel = () => {
  const exchange = exchanges.find(e => e.value === selectedExchange.value)
  return exchange ? exchange.label : '全部'
}

// 监听props变化
watch(() => props.selectedSector, (newValue) => {
  selectedSector.value = newValue
})

watch(() => props.selectedExchange, (newValue) => {
  selectedExchange.value = newValue
})
</script>
